import { AntDesignTheme, MessageTip } from '@amcax/base';
import { ReactComponent as CsvFIlesSvg } from '@app-base/assets/svg-icons/commands/product/bracket/csv-file.svg';
import type { UploadProps } from 'antd';
import { ConfigProvider, Modal, Upload } from 'antd';
import React, { Fragment, useEffect, useState } from 'react';
import BatchInstallationDetail from './batch-installation-detail';
import { wsApi } from '@app-base/server';

const { Dragger } = Upload;
interface Props {
  open: boolean;
  onClose: VoidFunction;
}

const acceptFileTypes = ['.csv'];

// 宽度为400px
const props: UploadProps = {
  name: 'file',
  multiple: true,
  accept: acceptFileTypes.join(','),
  beforeUpload: () => {
    return false;
  },
  onChange(info) {
    if (info.file.status === 'error') {
      MessageTip.error(`${info.file.name} 文件上传失败`);
    }
  },
};

export const BracketInstallationModal: React.FC<Props> = ({
  open,
  onClose,
}) => {
  const [detailModalVis, setDetailModalVis] = useState(false);
  const [uploaderVis, setUploaderVis] = useState(true);
  useEffect(() => {
    setUploaderVis(open);
  }, [open]);

  const onInstall = async () => {
    await wsApi.execAiCmd({
      c: 'GetBracketLoadFile', // 方法名称
      path: 's3://MOCK.csv', //文件路径
    });
    // console.log(r);
    setDetailModalVis(true);
    setUploaderVis(false);
  };

  return (
    <Fragment>
      <ConfigProvider theme={AntDesignTheme}>
        <Modal
          open={uploaderVis}
          width={480}
          title='导入载荷文件'
          okText='开始安装'
          onCancel={onClose}
          onOk={onInstall}
          cancelText='取消'
          maskClosable={false}
        >
          <Dragger {...props}>
            <div
              style={{
                display: 'flex',
                flexDirection: 'column',
                alignItems: 'center',
                justifyContent: 'center',
                height: '100%',
              }}
            >
              <p className='ant-upload-drag-icon'>
                <CsvFIlesSvg />
              </p>
              <p className='ant-upload-text'>
                将荷载文件拖到此处,或点击上传文件
              </p>
            </div>
          </Dragger>
        </Modal>
      </ConfigProvider>
      {detailModalVis && <BatchInstallationDetail onClose={onClose} />}
    </Fragment>
  );
};
